<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title>搜索</title>
    <link rel="stylesheet" href="../../css/aui.css">
    <link rel="stylesheet" href="../../css/common.css">
    <script type="text/javascript" src="../../script/api.js"></script>
    <script language="JavaScript" src="../../script/vue.js"></script>
    <script language="JavaScript" src="../../script/common.js"></script>
    <style>
        .search-sug {
            font-size: 0.6rem;
            line-height: 1.2rem;
            padding-left: 0.4rem;
        }

        .sug-list {
            word-break: keep-all;
            line-height: 1.4rem;
        }

        .sug-list span {
            border: 1px solid #d2d2d2;
            border-radius: .2rem;
            color: #151516;
            padding: 0.2rem;
            margin: 0 0.2rem;
        }

        .aui-searchbar-cancel {
            color: #ccc;
        }

        #search-page .aui-btn {
            background-color: #f2f2f2;
        }
    </style>
</head>

<body>

    <div id="search-page">
        <div class="aui-content">
            <header class="aui-searchbar" id="header">
                <a class="aui-pull-left aui-btn" onclick="closewin();">
                    <span class="aui-iconfont aui-icon-left"></span>
                </a>
                <div class="aui-searchbar-input aui-border-radius">
                    <i class="aui-iconfont aui-icon-search"></i>
                    <form onsubmit="return pvm.dosearch();">
                        <input type="search" v-model="keyword" @click="showtip" placeholder="请输入搜索内容">
                    </form>
                </div>
                <div class="aui-searchbar-cancel" tapmod @click="closetip">取消</div>
            </header>
            <div v-show="show_stip">
                <div class="search-sug">
                    <div class="his-box" v-show="hisword.length>0">
                        <div class="sug-title">历史搜索<span @click="delhis" class="aui-iconfont aui-icon-trash aui-pull-right aui-margin-r-10"></span></div>
                        <div class="sug-list"> <span v-for="item in hisword" @click="searchit($event)">{{item.title}}</span> </div>
                    </div>
                    <div class="hot-box">
                        <div class="sug-title">热门搜索</div>
                        <div class="sug-list"> <span v-for="item in hotword" @click="searchit($event)">{{item.title}}</span> </div>
                    </div>
                </div>
            </div>
        </div>





    </div>


    <script>
        var pvm = new Vue({
            el: '#search-page',
            data: {
                 keyword: '',
                show_stip: true, //显示搜索提示

                  hotword: [],
                hisword: []
            },
            methods: {
                searchit: function(e) {
                    var el = e.target;
                    this.keyword = el.innerHTML;
                    pvm.dosearch();
                },
                showtip: function() {
                    this.show_stip = true;
                  },
                closetip: function() {
                    this.show_stip = false;
                 },

                delhis: function() {
                    $page.get_data('/api/product/delSearch', 'post', {}, function(ret) {
                        pvm.hisword.splice(0, pvm.hisword.length);
                    });
                },

                load_init: function() {
                  $page.get_data('/api/product/getSearchHistory', 'post', {
                      'limit': 10
                  }, function(ret) {
                      pvm.hisword = ret.data;
                  });

                    $page.get_data('/api/diy/getContentList','post',{'placeid':4},function (ret) {
                  pvm.hotword = ret.data;
              });

                },
                dosearch: function() {
                  var headerh = $api.dom('header').offsetHeight;
                     $page.openfrm('product_search_frame','./search_frame.html',{x:0,y:headerh,w:'auto',h:api.winHeight-headerh},
                     {keyword:this.keyword},false,true);
                     return false;
                },

            }
        });
        apiready = function() {
            var pageparam = api.pageParam;


            pvm.load_init();
        }
    </script>
</body>

</html>
